<template>
  <!-- 全部、衣裤、化妆品、鞋袜切换组件 -->
  <scroll-x class="tab-control" :titlesCount="this.titles.length">
    <li v-for="(item, index) in titles"
    :key="index" class="tab-control-item"
    :class="{active: index === currentIndex}"
    @click="itemClick(index)">
      <span>{{ item }}</span>
    </li>
  </scroll-x>
</template>

<script>
import scrollX from 'components/common/scroll/scroll_x.vue'

export default {
  name: "tab_control_dark",
  components: {
    scrollX
  },
  props: {
    titles: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      currentIndex: 0
    }
  },
  methods: {
    itemClick(index) {
      this.currentIndex = index;
      this.$emit('tabClick', index);
    }
  }
}
</script>

<style scoped>
  .tab-control {
    height: 50px;
    padding-top: 4px;
    font-size: 15px;
    padding-left: 12px;
    position: absolute;
    left: 0;
    right: 0;
    white-space: nowrap;
    overflow: hidden;
  }

  .tab-control-item {
    width: 60px;
    height: 40px;
    color: #fff;
    text-align: center;
    line-height: 40px;
    display: inline-block;
    opacity: 0.6;
  }

  .active {
    font-weight: 600;
    opacity: 1;
  }

  .active span {
    position: relative;
  }

  .active span::after {
    content: '';
    height: 2px;
    border-radius: 2px;
    background-color: #fff;
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translate(-50%);
    animation: underline 0.8s forwards ease;
  }

  @keyframes underline {
    from {
      width: 0;
    }
    to {
      width: 24px;
    }
  }
</style>